<template>
  <!-- <div class="sider">-->
  <div class="sider" v-bind:style="siderStyle">
    <div class="sider-header">
      <svg-icon icon-class="logo" className="sysLogo" />
      <span class="sysName">安全信息管理系统</span>
    </div>

    <div class="siderMenu" style="">
      <tree-menu
        v-for="(siderMenu, index) in siderMenus[0].children"
        :key="index"
        :icon="siderMenu.meta.icon"
        :label="siderMenu.meta.title"
        :nodes="siderMenu.children"
        :in-edit="siderMenu.inEdit"
        :depth="0"
      />
    </div>
  </div>
</template>

<script>
import TreeMenu from './TreeMenu.vue';

export default {
  name: 'SiderHome',
  props: {
    width: {
      type: Number,
      default: 300,
    },
    minwidth: {
      type: Number,
      default: 80,
    },
    height: {
      Number,
      default: 100,
    },
    userName: {
      type: String,
      default: '',
    },
    userId: {
      type: String,
      default: '',
    },
    workId: {
      type: String,
      default: '',
    },
    siderMenus: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      siderStyle: {
        minWidth: this.width + 'px',
        height: this.height + '%',
      },
      foldPosStyle: {
        left: this.width - 20 + 'px',
        top: '30px',
      },
      siderUnfold: false,

      // siderMenus: [
      //   {
      //     label: '首 页',
      //     icon: 'home',
      //     link: '/home',
      //     nodes: [],
      //   },
      //   {
      //     label: '人事管理',
      //     icon: 'staff',
      //     link: '',
      //     nodes: [
      //       {
      //         label: '人员信息',
      //         icon: '',
      //         link: '/personmanage',
      //         nodes: [],
      //       },
      //       {
      //         label: '班组人员查询',
      //         icon: '',
      //         link: '/teampersonquery',
      //         nodes: [],
      //       },
      //       {
      //         label: '特殊作业证人员查询',
      //         icon: '',
      //         link: '/opcardpersonquery',
      //         nodes: [],
      //       },
      //     ],
      //   },
      //   {
      //     label: '培训管理',
      //     icon: 'book',
      //     link: '',
      //     nodes: [
      //       {
      //         label: '培训维护',
      //         icon: '',
      //         link: '/trainingmanage',
      //         nodes: [],
      //       },
      //       {
      //         label: '培训个人学时查询',
      //         icon: '',
      //         link: '/traininglearningtimequery',
      //         nodes: [],
      //       },
      //       {
      //         label: '培训全员学时查询',
      //         icon: '',
      //         link: '/trainingeveryonetimequery',
      //         nodes: [],
      //       },
      //     ],
      //   },
      //   {
      //     label: '会议管理',
      //     icon: 'meeting',
      //     link: '',
      //     nodes: [
      //       {
      //         label: '会议维护',
      //         icon: '',
      //         link: '/meetingmanage',
      //         nodes: [],
      //       },
      //     ],
      //   },
      //   {
      //     label: '系统设置',
      //     icon: 'setting',
      //     link: '',
      //     nodes: [
      //       {
      //         label: '用户及权限维护',
      //         icon: '',
      //         link: '/userandrightmanage',
      //         nodes: [],
      //       },
      //     ],
      //   },
      // ],
    };
  },
  methods: {
    onWidthChange() {
      let _this = this;
      let minWidthStyle = _this.minwidth + 'px';
      console.log('click');
      console.log(_this.width + ',' + _this.minwidth);
      if (_this.siderStyle.minWidth !== minWidthStyle) {
        _this.siderStyle.width = _this.minwidth + 'px';
        _this.foldPosStyle.left = _this.minwidth - 20 + 'px';
        _this.siderUnfold = true;
      } else {
        _this.siderStyle.minWidth = _this.width + 'px';
        _this.foldPosStyle.left = _this.width - 20 + 'px';
        _this.siderUnfold = false;
      }
    },
  },
  created() {
    console.log(this.siderMenus);
  },
  components: { TreeMenu },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.sider {
  /* //background-image: linear-gradient(rgb(217, 236, 255), rgb(83, 168, 255)); */
  /* background: linear-gradient(
    to top,
    #8e9eab,
    #eef2f3
  ); W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background: linear-gradient(
    to top,
    #ece9e6,
    #ffffff
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  color: rgba(0, 0, 0, 0.85);
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.19);
  border-radius: 10px;
}
.sider-header {
  position: relative;
  min-height: 50px;
  border-bottom: 2px solid rgb(150 144 144 / 50%);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  color: black;
  padding: 5px 10px 5px 10px;
}
.sysLogo {
  color: greenyellow;
  height: 40px;
  width: 40px;
}
.sysName {
  font-size: 1.2em;
  font-weight: 600;
  padding: 10px;
  flex-grow: 1;
}

.siderMenu {
  margin: 10px 5px 0 5px;
  font-size: 1em;
  overflow-y: auto;
  overflow-x: auto;
  flex-grow: 1;
  line-height: 30px;
  color: black;
}

.siderMenu::-webkit-scrollbar-track {
  background: white;
}
.siderMenu::-webkit-scrollbar {
  width: 3px;
}
.siderMenu::-webkit-scrollbar-thumb {
  background: #99a9bf;
  border-radius: 20px;
}

.sider-fold {
  position: absolute;
  width: 22px;
  height: 22px;
  color: black;
  border-radius: 50%;
  background-color: aliceblue;
  font-weight: 600;
  text-align: center;
  box-shadow: 1px 2px 5px 0px rgba(0, 0, 0, 0.2);
}
</style>
